<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医生个人信息</title>
    <!-- 引入 Tailwind CSS 和 Font Awesome -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#60a5fa',
                        accent: '#bfdbfe',
                        neutral: '#f1f5f9',
                        'neutral-dark': '#334155',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                    }
                },
            }
        }
    </script>

    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg;
            }
            .info-item-animate {
                @apply transition-all duration-300 hover:bg-blue-50 hover:translate-x-1;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-neutral-dark min-h-screen flex items-center justify-center p-4">
<div class="w-full max-w-2xl">
    <!-- 卡片容器 -->
    <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover">
        <!-- 头部区域 -->
        <div class="bg-blue-50 border-b border-blue-100 p-6 md:p-8">
            <div class="flex items-center">
                <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                    <i class="fa fa-user-md text-2xl text-primary"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-neutral-dark">医生信息</h1>
                    <p class="text-blue-600 text-sm mt-1">员工编号: GZLG-DOC <span class="font-medium" th:text="${doctor.id}">-001</span></p>
                </div>
            </div>
        </div>

        <!-- 信息展示区域 -->
        <div class="p-6 md:p-8 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 左侧信息组 -->
                <div class="space-y-4">
                    <div class="info-item-animate p-4 rounded-lg border border-gray-100">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fa fa-user text-blue-600"></i>
                            </div>
                            <div>
                                <div class="text-xs text-gray-500">姓名</div>
                                <div class="text-lg font-medium" th:text="${doctor.name}">张医生</div>
                            </div>
                        </div>
                    </div>

                    <div class="info-item-animate p-4 rounded-lg border border-gray-100">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fa fa-venus-mars text-blue-600"></i>
                            </div>
                            <div>
                                <div class="text-xs text-gray-500">性别</div>
                                <div class="text-lg font-medium" th:text="${doctor.gender}">男</div>
                            </div>
                        </div>
                    </div>

                    <div class="info-item-animate p-4 rounded-lg border border-gray-100">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fa fa-birthday-cake text-blue-600"></i>
                            </div>
                            <div>
                                <div class="text-xs text-gray-500">出生日期</div>
                                <div class="text-lg font-medium" th:text="${#dates.format(doctor.birth_date, 'yyyy-MM-dd')}">1985-03-22</div>
                            </div>
                        </div>
                    </div>

                    <div class="info-item-animate p-4 rounded-lg border border-gray-100">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fa fa-id-card text-blue-600"></i>
                            </div>
                            <div>
                                <div class="text-xs text-gray-500">身份证号</div>
                                <div class="text-lg font-medium" th:text="${doctor.id_card}">110101198503221234</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧信息组 -->
                <div class="space-y-4">
                    <div class="info-item-animate p-4 rounded-lg border border-gray-100">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fa fa-calendar text-blue-600"></i>
                            </div>
                            <div>
                                <div class="text-xs text-gray-500">年龄</div>
                                <div class="text-lg font-medium" th:text="${doctor.age}">40</div>
                            </div>
                        </div>
                    </div>

                    <div class="info-item-animate p-4 rounded-lg border border-gray-100">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fa fa-phone text-blue-600"></i>
                            </div>
                            <div>
                                <div class="text-xs text-gray-500">联系电话</div>
                                <div class="text-lg font-medium" th:text="${doctor.phone}">13812345678</div>
                            </div>
                        </div>
                    </div>

                    <div class="info-item-animate p-4 rounded-lg border border-gray-100">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fa fa-map-marker text-blue-600"></i>
                            </div>
                            <div>
                                <div class="text-xs text-gray-500">地址</div>
                                <div class="text-lg font-medium" th:text="${doctor.address}">广东省广州市天河区XX路</div>
                            </div>
                        </div>
                    </div>

                    <div class="info-item-animate p-4 rounded-lg border border-gray-100">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fa fa-stethoscope text-blue-600"></i>
                            </div>
                            <div>
                                <div class="text-xs text-gray-500">职称</div>
                                <div class="text-lg font-medium" th:text="${doctor.title}">副主任医师</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 动画效果 -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const infoItems = document.querySelectorAll('.info-item-animate');
        infoItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(20px)';
            setTimeout(() => {
                item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 100 * index);
        });
    });
</script>
</body>
</html>
